建造較佳的盒框

盒框模型(box model)是瀏覽器決定如何渲染(render)一個方型區域的方法，因此瞭解盒框模型的運作對我們而言是很重要的，而HTML的所有元素基本上都可以視為一個盒框。

每個盒框都有自己的寬(width)、高(height)、内距(padding)、邊寬(margin)與邊框(border)
這個盒框的尺寸(dimensions)有兩種計算方法，取決於指定給元素box-sizing屬性的值
比較特殊的是邊寬(margin)會影響到盒框周圍的空間但不計入盒框大小的計算。

box-sizing: content-box

當box-sizing屬性的值被設為content-box時
盒框尺寸等於padding與border的尺寸加上height與width屬性的尺寸。

假設 width:150px; height:150px; padding:10px; margin:5px; border:5px;

高度的計算方式為
150px(height) + 10px(padding-top) + 10px(padding-bottom) + 5px(border-top) + 5px(border-bottom) = 180px

寬度的計算方式為
150px(width) + 10px(padding-right) + 10px(padding-left) + 5px(border-right) + 5px(border-left) = 180px

box-sizing: border-box

當box-sizing屬性被設為border-box時
盒框尺寸就由該盒框的width與height屬性來決定，盒框中的padding與border屬性不計入尺寸的計算
但是瀏覽器會考慮padding與border並適當調整width與height讓整體尺寸等於idth與height屬性的設定值
高度的計算方式為
150px(height) - 10px(padding-top) - 10px(padding-bottom) - 5px(border-top) - 5px(border-bottom) = 120px 隱性的高

寬度的計算方式為
150px(width) - 10px(padding-right) - 10px(padding-left) - 5px(border-right) - 5px(border-left) = 120px 隱性的寬

content-box 或 border-box ?

其實這兩種方式並沒有哪一種比較好的問題。
許多人覺得border-bpx比較直覺，因為他代表了元素從這一邊框到另一邊框的總高度與寬度

box-sizing可以在任何元素上設定，border-box與content-box是可以混用與匹配的
但是為了一致性，通常只會選一種來使用。

心得

第三章的篇幅蠻長的主要在介紹想要編寫更好的CSS應該要怎麼做會比較好
書中提到的內容都是我以前想過但是沒有答案也不知道該怎麼下手找答案的問題
個人覺得最受用的還是特定度的計算還有最後面的box-madel與box-sizing
解決了我不少在實作上想破頭卻不知道如何是好的問題XD